import React, { useState, useEffect } from 'react'
import style from './index.module.less'
// import titleIcon from '../../../assets/images/loginTitleIcon.png'
import { loginContext } from './context'
import store from './hooks/index'
import RightLogin from './components/right/index'
import LeftComponentDom from './components/left/index'
import { loginInfoType } from './interface/index'

export default () => {
  const loginStore = store()
  // 获取的信息
  const [loginInfo, setLoginInfo] = useState<loginInfoType>({} as loginInfoType)
  // 我来控制盒子内容的显示
  const [index, setIndex] = useState<number>(0)
  const [items, setItems] = useState([
    { name: '平台概况', fontSize: '40px', color: '#0A1C7A' },
    { name: '操作指南', fontSize: '24px', color: '#3B4DAF' },
    { name: '公告通知', fontSize: '24px', color: '#3B4DAF' },
    /* <IconSvg name='yhj' /> */
  ])
  const handleClick = (index: number) => {
    setIndex(index)
    const updatedItems = items.map((item, idx) => {
      if (idx === index) {
        return { ...item, fontSize: '40px', color: '#0A1C7A' }
      }
      return { ...item, fontSize: '24px', color: '#3B4DAF' }
    })
    setItems(updatedItems)
  }

  useEffect(() => {
    console.log('loginStore.loginRightConfig.loginInfo🚀🚀🚀🚀', loginStore.loginRightConfig.loginInfo)
    setLoginInfo(loginStore.loginRightConfig.loginInfo)
  }, [loginStore.loginRightConfig.loginInfo])

  return (
    <loginContext.Provider value={loginStore}>
      <div className={style.loginPage}>
        <div className={style.loginLeftBox}>
          <div className={style.leftTop}>
            <div className={style.leftTopCenter}>
              {/* 顶部切换文字渲染 */}
              {items.map((item, index) => (
                <div
                  onClick={() => handleClick(index)}
                  style={{
                    fontSize: item.fontSize,
                    color: item.color,
                    display: 'inline-block',
                    marginRight: 20,
                    cursor: 'pointer',
                  }}
                  key={index}
                >
                  <span>{item.name}</span>
                </div>
              ))}
            </div>
          </div>
          {/* 隔着呢 动态切换 */}
          <div className={style.leftBottom}>
            <div className={style.leftBottomCenter}>
              <div className={style.bottomCenterTop}>
                <div className={style.throw1}></div>
                <div className={style.throw2}></div>
                <div className={style.throw3}></div>
              </div>
              <LeftComponentDom index={index} />
              {/* 平台概况 */}
              {/* {index === 0 && pingtaigaikuangBox()} */}
              {/* 平台概况 */}

              {/* 操作指南 */}
              {/* {index === 1 && caozuozhinanBox} */}
              {/* 操作指南 */}

              {/* 公告通知 */}
              {/* {index === 2 && gonggaotongzhi} */}
              {/* 公告通知 */}
            </div>
          </div>
          {/* 隔着呢 动态切换 */}
        </div>
        <div className={style.loginRightBox}>
          <div className={style.top}>
            <div className={style.titleBox}>
              <div>
                <img src={loginInfo.logo} alt='' />
              </div>
              <div className={style.titleFont}>{loginInfo.chineseName}</div>
            </div>
          </div>
          <div className={style.bottom}>
            <RightLogin />
          </div>
        </div>
      </div>
    </loginContext.Provider>
  )
}
